<!DOCTYPE html>
<html xmlns="">
<head>
    <meta charset="UTF-8">
    <title>试卷详情</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/common.css">
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="./js/common.js"></script>
</head>
<style>
    li.item {
        padding: 20px 0;
        border-bottom: 1px solid #ccc;
    }

    li.item:first-child {
        padding-top: 0;
    }

    .answerContent {
        margin-top: 10px;
    }

    .answerContent ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 20px;
    }

    .answerContent ul li {
        padding-right: 20px;
    }

    .analysis {
        margin: 10px 0 0 20px;
    }

</style>
<body>
<div id="app">
    <el-row>
        <el-col :span="14" :offset="5">
            <div class="container">
                <div class="button-bar">
                    <div class="checkbox-bar">
                        <el-checkbox @change="onlyShowRight">只显示正确答案</el-checkbox>
                    </div>
                    <div class="return-btn" title="返回列表" @click="returnList">
                        <el-button type="warning" size="small" plain>
                            <i class="el-icon-back"></i>
                        </el-button>
                    </div>
                </div>
                <ul>
                    <li v-for="(item, index) of list" class="item">
                        <div>
                            <div class="quesContent">{{index + 1}} . {{item.quesContent}}：</div>
                            <div class="answerContent">
                                <ul>
                                    <li v-for="(answer, idx) of item.answers">
                                        <span :class="{'font-success bold': answer.ansId==item.rightAnswerId, 'font-danger bold': answer.ansId==item.checkAnswerId}">{{answer.ansContent}}</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="analysis" v-if="item.analysis">
                                题目解析：{{item.analysis}}
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </el-col>
    </el-row>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                list: []
            }
        },
        methods: {
            // 获取试卷详细内容
            getDetail() {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(255, 255, 255, 0.7)'
                });
                axios.get(`/paper/t-paper/detail/${this.options.id}`)
                    .then(res => {
                        console.log(res)
                        this.list = res.data.model;
                        loading.close();
                    })
                    .catch(err => {
                        console.log(err)
                        loading.close();
                    })
            },
            // 返回列表页
            returnList() {
                window.location.href = "./historyList.html"
            },
            // 只显示正确答案
            onlyShowRight(checked) {
                if(checked) {
                    $(".answerContent span:not(.font-success)").hide();
                    $(".answerContent li").css('padding-right', 0);
                } else {
                    $(".answerContent span:not(.font-success)").show();
                    $(".answerContent li").css('padding-right', '20px');
                }
            }
        },
        mounted () {
            getUrlParam(this)
            this.id = this.options.id
            this.getDetail()
        }
    })
</script>
</html>